﻿
// 此处需要先加载ol初始化中需要用到的相关的类
// 此前尝试把require和初始化代码放到一起，但总是存在问题，总是先执行



goog.require('ol');
goog.require('ol.View');
goog.require('ol.Map');
goog.require('ol.layer.Layer');
goog.require('ol.layer.Tile');
goog.require('ol.source.Source');
goog.require('ol.source.MapQuest');
goog.require('ol.source.Stamen');
goog.require('ol.control');
goog.require('ol.control.Control');
goog.require('ol.source.TileWMS');
goog.require('ol.source.TileGWC');
goog.require('ol.source.TileJSON');
goog.require('ol.control.MousePosition');
goog.require('ol.control.ScaleLine');

goog.require('ol.interaction.Draw');
goog.require('ol.layer.Vector');
goog.require('ol.source.Vector');
goog.require('ol.style.Style');
goog.require('ol.dmp.PoltInteraction');

goog.require('ol.dmp.algorithmsUtility');


window.addEventListener("load", function ()
{



    var map = new ol.Map({
        view: new ol.View({
            center: [0, 0],
            zoom: 1,
            zoomFactor: 2    //zoomFactor 值必须大于1
        }),
        layers: [
          new ol.layer.Tile({
              //source: new ol.source.MapQuest({ layer: 'osm' })
             source: new ol.source.Stamen({ layer: 'watercolor' })
          }),

          //new ol.layer.Tile({
          //    source: new ol.source.TileWMS({
          //        url: "http://localhost:8080/geoserver/acx/wms",
          //        params: { 'LAYERS': 'globe6','format':'image/png', "tiled": true },
          //                serverType:'geoserver'
          //            })

          //        }),


          //new ol.layer.Tile({
          //    source: new ol.source.TileJSON({
          //        url: 'http://api.tiles.mapbox.com/v3/' + 'mapbox.natural-earth-hypso-bathy.jsonp',
          //        crossOrigin: 'anonymous'
          //    })
          //}),

          // gwc图层测试
          //new ol.layer.Tile({
          //    source: new ol.source.TileGWC({
          //        url: "http://localhost:8080/geowebcache/service/gmaps",
          //        params:
          //            {
          //                'layers': 'globe6',
          //                'format': 'image/png'
          //            }
          //    })
          //})

        ],
        //controls: [
        //    new ol.control.Zoom()
        //],

        //interactions: [
        //    new ol.interaction.KeyboardPan()
        //],
        target: 'map'
    });

    // 添加部分控件
    map.addControl(new ol.control.MousePosition());
    //map.addControl(new ol.control.ScaleLine());




    //var interaction = new ol.interaction.MouseWheelZoom();
    //map.addInteraction(interaction);

    //var x = map.getInteractions();
    //var y = x;

    //var mapelement = document.getElementById("map");
    //mapelement.addEventListener('keydown', function () { alert("ts") });


    //var cans = document.getElementsByClassName("ol-unselectable");

    //cans[0].addEventListener('keyup', function () { alert("ts1") });



    // gwc图层测试

    //var layer2 = new ol.layer.Tile
    //    ({
    //        source: new ol.source.TileGWC
    //            ({
    //                url: 'http://localhost:8080/geowebcache/service/gmaps',
    //                params:
    //                    {
    //                        'layers': 'globe6',
    //                        'format': 'image/png',
    //                    },
    //                maxZoom: 22,
    //            }),
    //    });
    //map.addLayer(layer2);



    ////键盘事件测试
    //解决地图渲染类型为canvas时地图不能接受键盘事件的问题
    //1.canvas 标签本身并不能响应键盘事件，需要添加tabindex这个属性项，tabindex为html5规范dom元素，可以相应键盘事件
    //2.当鼠标移入地图是需要给canvas对象重置为当前焦点，因为在有些情况下，其不会自己获取焦点。
    $("canvas").attr('tabindex',-1).mouseenter(function (e) { this.focus();}).focus();;

    //$(".ol-mouse-position").addClass("ol-control");

    //$('#map_container').keydown(function () { alert('t') });


    // 绘制

    // 首先需要一个矢量图层
    var vectorSource=new ol.source.Vector();
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: new ol.style.Style({
            fill:new ol.style.Fill({
                color: 'rgba(255,255,255,0.5)'
            }),
            stroke: new ol.style.Stroke({
                color: '#ffcc33',
                width:2
            }),
            image: new ol.style.Circle({
                radius: 5,
                fill: new ol.style.Fill({
                    color:'#ffcc33'
                })
            })
        })
    });

    map.addLayer(vectorLayer);

    // 交互绘制要素
    var drawinte = new ol.dmp.PoltInteraction({
        source: vectorSource,
        //type: ol.interaction.DrawMode.SIMPLYARROW
        //type:ol.geom.GeometryType.LINE_STRING
        //type:ol.geom.GeometryType.POLYGON
        //type: ol.dmp.interactionGeometry.FeatureType.MULTIARROW
    });
    map.addInteraction(drawinte);
    
    drawinte.on(ol.DrawEventType.DRAWEND, function (feature)  // 绘制完成后会引发drawend事件
    {
        var x = feature;
    });



    // 按钮测试

    $('#btn_point').click(btn_pointClick);
    $('#btn_line').click(btn_lineClick);
    $('#btn_polygon').click(btn_polygonClick);
    $('#btn_simplyarrow').click(btn_simplyarrowClick);
    $('#btn_dicearrow').click(function ()
    {
        drawinte.setFeatureType(ol.dmp.interactionGeometry.FeatureType.DICEARROW);
    });

    $("#btn_attackarrow").click(function ()
    {
        drawinte.setFeatureType(ol.dmp.interactionGeometry.FeatureType.ATTACKARROW);
    });
    $("#btn_rallyregion").click(function ()
    {
        drawinte.setFeatureType(ol.dmp.interactionGeometry.FeatureType.RALLYREGION);
    });
    $('#btn_multiarrow').click(function ()
    {
        drawinte.setFeatureType(ol.dmp.interactionGeometry.FeatureType.MULTIARROW);
    });

    //$("#btn_save").click(function ()
    //{
    //    var features = drawinte.getFeatures();
    //    var fea = [4,3];
    //    $.ajax({

    //        url: '/Polt/SaveSolution',
    //        data: {"feature":fea},
    //        type: 'POST',
    //        sucess: function (e)
    //        {
    //            var ee = e;
    //        },
    //        error: function (e)
    //        {
    //            var ex = e;
    //        }
    //    });

    //});

    function btn_pointClick()
    {
        drawinte.setFeatureType(ol.dmp.interactionGeometry.FeatureType.POINT);
    }
    function btn_lineClick()
    {
        drawinte.setFeatureType(ol.dmp.interactionGeometry.FeatureType.LINESTRING);
    }
    function btn_polygonClick()
    {
        drawinte.setFeatureType(ol.dmp.interactionGeometry.FeatureType.POLYGON);
    }
    function btn_simplyarrowClick()
    {
        drawinte.setFeatureType(ol.dmp.interactionGeometry.FeatureType.SIMPLYARROW);
    }





});




